<!DOCTYPE html>
<html>
  <head>
    <title>first.html</title>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">

	<link rel="stylesheet" type="text/css" href="../css/jquery-ui-1.10.3.custom.min.css"> 
	<!--注意js文件的加载顺序 -->
    <script type="text/javascript" src="../javascript/lib/jquery-1.9.1/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="../css/jquery-ui-1.10.3.custom.js"></script>
    <script type="text/javascript" src="../javascript/lib/flot/jquery.flot.js"></script>
    <script type="text/javascript" src="../javascript/lib/flot/jquery.flot.stack.js"></script>
	
	<style type="text/css">
		.demo-container {
			width: 850px;
			height: 450px;
		/*	box-sizing: border-box;
			padding: 20px 15px 15px 15px;
			margin: 15px auto 30px auto;
			border: 1px solid #ddd;
			background: #fff;
			background: linear-gradient(#f6f6f6 0, #fff 50px);
			background: -o-linear-gradient(#f6f6f6 0, #fff 50px);
			background: -ms-linear-gradient(#f6f6f6 0, #fff 50px);
			background: -moz-linear-gradient(#f6f6f6 0, #fff 50px);
			background: -webkit-linear-gradient(#f6f6f6 0, #fff 50px);
			box-shadow: 0 3px 10px rgba(0,0,0,0.15);
			-o-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
			-ms-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
			-moz-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
			-webkit-box-shadow: 0 3px 10px rgba(0,0,0,0.1); */
		}
		.demo-placeholder {
			width: 100%;
			height: 100%;
			font-size: 14px;
			line-height: 1.2em;
		}
	</style>
	<script type="text/javascript">
		$(function(){
			$(":button").button();

			var b1=[] , b2=[] , b3=[];
			for(var i=0 ; i<=10 ; i += 1){
				b1.push([i , parseInt(Math.random()*30)]);
				b2.push([i , parseInt(Math.random()*30)]);
				b3.push([i , parseInt(Math.random()*30)]);
			}
			
			var stack = 0;
				bars = true;
				lines = false;
				steps = false;
			
			function plotwithoptions(){
				$.plot("#container", [ b1, b2, b3 ], {
					series: {
						stack: stack,
						lines: {
							show: lines,
							fill: true,
							steps: steps
						},
						bars: {
							show: bars,
							barWidth: 0.6
						}
					}
				});
			}

			plotwithoptions();

			$("#stackControls button").click(function(e){
				e.preventDefault();
				stack = $(this).text() == "with stacing" ? true : null ;
				plotwithoptions();
			});

			$("#graphControls button").click(function(e){
				e.preventDefault();
				bars = $(this).text().indexOf("bars") != -1;
				lines = $(this).text().indexOf("lines") != -1;
				steps = $(this).text().indexOf("steps") != -1;
				plotwithoptions();
			});
		});
	</script>
  </head>
  
  <body>
	<!--需要指定高宽 -->
	<div class="demo-container">
		<div id="container" class="demo-placeholder"></div>
	</div>
	<div id="stackControls">
		<button>with stacing</button>
		<button>without stacing</button>
	</div>

	<div id="graphControls">
		<button>bars</button>
		<button>lines</button>
		<button>lines with steps</button>
	</div>
  </body>
</html>
